<template>
  <div>
    <a-list
        item-layout="vertical"
        size="small"
        :data-source="paginatedData"
    >
      <template #renderItem="{ item }">
        <a-list-item :key="item.title">
          <template #extra>
            <img
                width="160"
                alt="cover"
                :src="item.cover_url"
            />
          </template>
          <a-list-item-meta :description="item.description">
            <template #title>
              <router-link to="/articleDetails" style="text-align: left; display: block;">{{ item.title }}</router-link>
            </template>
            <template #description>
              <div class="description" style="text-align: left;">{{ item.description }}</div>
            </template>
          </a-list-item-meta>
          <!-- 新增的作者、浏览数、点赞数 -->
          <div class="item-footer">
            <div class="footer-info">
              <span class="footer-item">
                <StarOutlined style="margin-right: 4px;" />
                作者: {{ item.author }}
              </span>
              <span class="footer-item">
                <MessageOutlined style="margin-right: 4px;" />
                浏览数: {{ item.views }}
              </span>
              <span class="footer-item">
                <LikeOutlined style="margin-right: 4px;" />
                点赞数: {{ item.likes }}
              </span>
            </div>
            <!-- 右侧的标签 -->
            <div class="footer-tags">
              <a-tag
                  v-for="(tag, index) in item.tags"
                  :key="index"
                  color="#d9d9d9"
                  class="tag"
                  @click="handleTagClick(tag.href)"
              >
                {{ tag.text }}
              </a-tag>
            </div>
          </div>
        </a-list-item>
      </template>
    </a-list>

    <!-- 分页组件 -->
    <a-pagination
        v-model:current="currentPage"
        :total="totalItems"
        :page-size="pageSize"
        @change="handlePageChange"
        :show-size-changer="false"
    />

    <div v-if="loading" class="loading-indicator">加载中...</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';

// Mock data
const listData = [];
for (let i = 0; i < 300; i++) { // 调整为300项以便于分页
  listData.push({
    href: 'https://www.antdv.com/',
    title: `ant design vue part ${i}`,
    cover_url: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png', // 新增封面数据
    description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    author: `Author ${i}`, // 作者信息
    views: Math.floor(Math.random() * 1000), // 随机浏览数
    likes: Math.floor(Math.random() * 500), // 随机点赞数
    tags: [  // 新增标签数据
      { text: '标签1', href: 'https://www.example.com/tag1' },
      { text: '标签2', href: 'https://www.example.com/tag2' },
      { text: '标签3', href: 'https://www.example.com/tag3' }
    ]
  });
}

// 分页设置
const pageSize = 10; // 每页显示10条数据
const currentPage = ref(1);

// 总数据条数
const totalItems = computed(() => listData.length);

// 计算分页数据
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return listData.slice(start, end);
});

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page;
};

// 标签点击处理函数
const handleTagClick = (href) => {
  window.location.href = href; // 通过修改浏览器地址来跳转
};

// 加载状态
const loading = ref(true);

// 模拟加载状态
setTimeout(() => {
  loading.value = false;
}, 1000);
</script>

<style scoped>
.loading-indicator {
  text-align: center;
  padding: 10px;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 14px;
  color: #888;
}

.footer-info {
  display: flex;
  align-items: center;
}

.footer-item {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
}

.footer-item svg {
  margin-right: 4px; /* 图标与文本之间的间距 */
}

.footer-tags {
  display: flex;
  gap: 8px;
}

/* 新增的样式 */
.description {
  white-space: nowrap; /* 不换行 */
  overflow: hidden;    /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 用省略号显示超出部分 */
}

.tag {
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
  transition: background 0.3s, color 0.3s; /* 平滑过渡效果 */
}

.tag:hover {
  background: #1890ff; /* 鼠标悬停时背景颜色变为蓝色 */
  color: #1890ff; /* 鼠标悬停时字体颜色变为白色 */
  border-color: #1890ff; /* 鼠标悬停时边框颜色 */
}
</style>
